Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: RichText edit / command menu #4621

Merged
merged 12 commits into from
Dec 20, 2024
Merged

feat: RichText edit / command menu #4621

merged 12 commits into from
Dec 20, 2024

Conversation

istarkov
Copy link
Member

@istarkov istarkov commented Dec 19, 2024

Description

ref #4595

Search is working

image

Arrow keys, enter, mouse click is working.

https://p-15889dd9-ed47-46db-9411-fa18c1efb2fe-dot-edit.development.webstudio.is/

  • - Enter and click
  • - Repeat > N then close menu (later)
  • - In case of select item clear cmd /blabla
  • - Put cursor inside 1st editable block of the new instance
  • - Should work only inside editable content

Steps for reproduction

  1. click button
  2. expect xyz

Code Review

  • hi @kof, I need you to do
    • conceptual review (architecture, feature-correctness)
    • detailed review (read every line)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

@istarkov istarkov changed the title feat: RichText edit feat: RichText edit / command menu Dec 19, 2024
@istarkov istarkov marked this pull request as ready for review December 19, 2024 13:30
@istarkov istarkov requested review from kof and johnsicili December 19, 2024 13:31
@johnsicili
Copy link
Contributor

Content Feedback @istarkov

  1. I can see a use case for insert within like if you are in a list, add a link or something, it will get inserted after. Low priority.
  2. Select the default text when adding. E.g., add paragraph, select text so I can start typing without CMD A backspace. Might be difficult though if we can’t detect default text. Just thinking about writing a page of content having to cmd a delete each time after add
  3. I think enter should drop the cursor to the next “row”. Seems enter is pretty useless inside paragraphs, headings, etc. If anything, only shift enter should be used. Plus not allowing enter will prevent misuse of line breaks in paragraphs. So maybe we should do something in between auto adding a new paragraph and adding line breaks upon enter?
  4. Seems odd to have to click into an existing instance to add a new one. Not sure what to do here.. maybe what Notion does.
  5. Come to think of it, Slash command is useful when it auto adds a paragraph. It’s like a way to convert the existing paragraph to something else. What if we just make “enter” pull up the add dialog? I think it might be more intuitive than adding a / after text like “end of my sentence./“
  6. Content mode feedback: Maybe we shouldn’t allot text edit in boxes I don’t think. I just realized when using slash, it put my cursor in an empty box.
Screenshot 2024-12-19 at 10 01 53 AM
  1. Content mode feedback: CMD K still works in content mode
  2. When using slash in content mode and not in a content block, it’s just a slash. Maybe we need some indication what’s going on here.

@istarkov
Copy link
Member Author

istarkov commented Dec 19, 2024

2 Select the default text when adding. E.g., add parag...

If you have an empty paragraph there is no need to select all.
image

3 Enter ....

not implemented here is / only

4 Seems odd to have to click into an existing ...

What this mean?

6 Content mode feedback: Maybe we shouldn’t allot text edit in boxes I don’t think.

Until boxes are editable and they are, there is no way to distinguish it vs any other editable content. Some flag probably.

8 CMD K still works in content mode

cmd k implementation bug.

9 When using slash in content mode and not in a co

Same in webstudio

@johnsicili
Copy link
Contributor

4 is the biggest feedback so let me explain.

I think we should use "enter" instead of "slash".

Slash is a really great command, but in every implementation of it that I've seen, you use it on a blank line, which is essentially a paragraph.

For our implementation, we are using it to add a new block.

The difference is in the common implementation of it, slash is used to convert blank lines, which are paragraphs, to another element.

In our implementation, slash is used to create a new line and component at the same time.

So I think unless we have a paragraph by default on enter, then "Enter" should be used to add something new. Type, enter, add component.

Also, typing slash within existing content feels odd.

Just a little video show how slash is used on new lines:
https://github.com/user-attachments/assets/9c7d146c-8092-46c5-8798-44f597b3ca22

@istarkov istarkov mentioned this pull request Dec 19, 2024
11 tasks
@istarkov istarkov requested a review from TrySound December 19, 2024 18:48
@istarkov istarkov merged commit ea88935 into main Dec 20, 2024
13 of 15 checks passed
@istarkov istarkov deleted the edit branch December 20, 2024 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants